var nav = document.querySelectorAll(".col-2 li");
var main = document.querySelectorAll(".col-7 > div");

for(var i = 0;i < nav.length;i++){
    nav[i].index = i;
    nav[i].addEventListener('click',function () {
        for(var k= 0;k < nav.length;k++){
            nav[k].classList.remove('active');
            main[k].classList.remove('active');
        }
        this.classList.add('active');
        main[this.index].classList.add('active');
    });
}



var div_span = document.querySelectorAll(".div-span p span");
var div_li = document.querySelectorAll(".div-span ul");

for(var i = 0;i < div_span.length;i++){
    div_span[i].index = i;
    div_span[i].addEventListener('click',function () {
        for(var k= 0;k < div_span.length;k++){
            div_span[k].classList.remove('two');
            div_li[k].classList.remove('two');
        }
        this.classList.add('two');

        div_li[this.index].classList.add('two');
    });
}


/*待办事项开始*/

var add = document.querySelector('#add');
add.addEventListener('click',function () {
    //获取input的内容
    var ipt = document.querySelector('#ipt');
    if(ipt.value == ''){
        alert('请输入内容')
    }else{
        // 创建li标签
        var li = document.createElement('li');
        var span = document.createElement('span');
        span.setAttribute("contenteditable","true");
        var span_text = document.createTextNode(ipt.value);
        span.appendChild(span_text);
        //创建button标签
        var button = document.createElement('button');
        var button_text = document.createTextNode('+');
        button.appendChild(button_text);
        button.addEventListener('click',function () {
            var list = document.querySelector('#list');
            list.removeChild(this.parentNode)
        })
        //把span和button追加到li标签
        li.appendChild(span);
        li.appendChild(button);
        //把li标签追加到ul里面
        var list = document.querySelector('#list');
        list.appendChild(li);
        ipt.value = null;
    }

})




/*日历开始*/


var year = 2019;
var month = 9;



var days = 0;
for(var i = 1980;i < year;i++){
    if(i % 4 == 0 && i % 100 != 0 || i % 400 == 0){
        days += 366;
    }else{
        days += 365;
    }
}


for(var i = 1;i < month;i++){
    switch (i){
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            days += 31;
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            days += 30;
            break;
        case 2:
            if(year % 4 ==0 && year % 100 != 0 || year % 400 ==0){
                days += 29;
            }else {
                days += 28;
            }
    }
}

var yuShu = (days  + 2) % 7;

var shangDay = 0;
var shangYue = month - 1 == 0 ? 12 : month - 1;
switch (shangYue){
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        shangDay += 31;
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        shangDay += 30;
        break;
    case 2:
        if(year % 4 ==0 && year % 100 != 0 || year % 400 ==0){
            shangDay += 29;
        }else {
            shangDay += 28;
        }
}


var thisDay = 0;
switch (month){
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        thisDay += 31;
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        thisDay += 30;
        break;
    case 2:
        if(year % 4 ==0 && year % 100 != 0 || year % 400 ==0){
            thisDay += 29;
        }else {
            thisDay += 28;
        }
}




var day = document.querySelector("#day");



for(var i = shangDay - yuShu + 1;i <= shangDay;i++){
    day.innerHTML += '<span class="h">'+ i +'</span>';
}


var today = new Date().getDate();
for(var i = 1;i <= thisDay;i++){
    if(i == today){
        day.innerHTML += '<span class="today">'+ i +'</span>';
    }else{
        day.innerHTML += '<span>'+ i +'</span>';
    }
}



for(var i = 1;i <= 42 - thisDay - yuShu;i++){
    day.innerHTML += '<span class="h">'+ i +'</span>';
}




document.querySelector("#span").innerHTML = year;
document.querySelector("#span1").innerHTML = month;